<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.mainbox {
			min-height: 100%;
			border: 1px solid #ccc;
			padding: 0 20px;
			background: #fff;
		}
		.pagetitle {
			color: #409EFF;
			font-weight: bold;
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
		}
		.logoimg {
			display: flex;
			align-items: center;
			margin-top: 20px;
		}
		.logoimg .title {
			margin-right: 10px;
			width: 80px;
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
		}
		.avatar {
			width: 120px;
			height: 120px;
			display: block;
		}
		.el-form {
			width: 100%;
			margin-top: 20px;
		}
		.el-form-item__label {
			text-align: left;
			padding: 0;
		}
		.el-select{
			width: 31%;
		}
		.item {
			display: flex;
			border-bottom: 1px solid #ccc;
			width: 100%;
			padding: 20px 0;
		}
		.itemtitle {
			font-size: 20px;
		}
		.itemcontent {
			margin-left: 20px;
		}
		.btns {
			margin-top: 20px;
		}
		.btns .el-button {
			width: 100px;
		}
	</style>
</block>
<block name="content">
	<div class="mainbox">
		<div class="pagetitle">编辑门店账号 </div>
		<el-form ref="form" :model="param" label-width="80px">
			<div class="item">
				<div class="itemtitle">门店名称</div>
				<div class="itemcontent">
					<el-form-item label="门店简称：">
						<el-input v-model="param.store_name"></el-input>
					</el-form-item>
					<div class="logoimg">
						<div class="title">头像：</div>
						<div class="upload">
							<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="param.imageUrl" :src="param.imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="itemtitle">登录信息</div>
				<div class="itemcontent">
					<el-form-item label="店长姓名">
						<el-input v-model="param.manager_name"></el-input>
					</el-form-item>
					<el-form-item label="登录手机">
						<el-input v-model="param.mobile"></el-input>
					</el-form-item>
					<el-form-item label="登录密码">
						<el-input v-model="param.password" show-password></el-input>
					</el-form-item>
					<el-form-item label="确定密码">
						<el-input v-model="param.repassword" show-password></el-input>
					</el-form-item>
				</div>
			</div>
			<div class="item">
				<div class="itemtitle">门店信息</div>
				<div class="itemcontent">
					<el-form-item label="所在市区">
						<el-select v-model="param.province" placeholder="省">
							<el-option label="广东省" value="guangdong"></el-option>
							<el-option label="广西省" value="guangxi"></el-option>
							<el-option label="湖南省" value="hunan"></el-option>
							<el-option label="湖北省" value="hubei"></el-option>
						</el-select>
						<el-select v-model="param.city" placeholder="市">
							<el-option label="深圳市" value="shenzhen"></el-option>
							<el-option label="广州市" value="guangzhou"></el-option>
							<el-option label="桂林市" value="guilin"></el-option>
							<el-option label="长沙市" value="changsha"></el-option>
							<el-option label="武汉市" value="wuhan"></el-option>
							<el-option label="襄阳市" value="xiangyang"></el-option>
						</el-select>
						<el-select v-model="param.area" placeholder="区">
							<el-option label="南山区" value="nanshan"></el-option>
							<el-option label="罗湖区" value="luohu"></el-option>
							<el-option label="福田区" value="futian"></el-option>
							<el-option label="龙华区" value="longhua"></el-option>
							<el-option label="龙岗区" value="longgang"></el-option>
							<el-option label="宝安区" value="baoan"></el-option>
							<el-option label="盐田区" value="yantian"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="详细地址">
						<el-input v-model="param.address"></el-input>
					</el-form-item>
				</div>
			</div>
			<div class="btns">
				<el-form-item>
					<el-button type="primary" size="small" @click="edit">编辑此账号</el-button>
					<el-button type="default" size="small">取消</el-button>
				</el-form-item>
			</div>
		</el-form>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    id: "{$id}",
                    param: {
                        audit_user_id: '{$audit_user_id}',
                        imageUrl: "",
                    },
					// 头像上传
                    uploadUrl: HOME_URL + "/Admin/File/upload",
                    uploadParam: {

					}
                }
            },
			created: function(){
				this.getInfoById();
			},
            methods: {
                getInfoById: function () {
                    var _this = this;
                    $.post(HOME_URL + "/orderAdmin/Store/getInfoById", {id: _this.id}, function (data) {
                        if(data.status){
                            _this.param = data.data;
                        }else{
                            _this.$message.error('添加门店失败');
                        }
                    }, 'json');
                },
                // 上传头像
                handleAvatarSuccess(res, file) {
                    var _this = this;
                    this.param.headimg = file.response.data.fileid;
                    this.param.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg' || 'image/png';
                    const isLt5M = file.size / 1024 / 1024 < 5;
                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt5M) {
                        this.$message.error('上传头像图片大小不能超过 5MB!');
                    }
                    this.uploadParam.type = file.name.split('.')[1];
                    this.uploadParam.size = file.size;
                    return isJPG && isLt5M;
                },
                edit() {
                    var _this = this;
                    $.post(HOME_URL + "/orderAdmin/Store/update", _this.param, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '编辑门店成功'
                            });
                            setTimeout(function () {
								location.href = HOME_URL + "/orderAdmin/Audit/shopinfo"
                            }, 1000);
                        }else{
                            _this.$message.error('编辑门店失败');
                        }
                    }, 'json');
                }
            }
        });
	</script>
</block>